<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 红色记忆·青春使命</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <img src="images/logo.png" alt="红色记忆Logo" height="40">
                <span>红色记忆·青春使命</span>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html" class="active">关于我们</a></li>
                <li><a href="heroes.html">红色人物</a></li>
                <li><a href="stories.html">红色故事</a></li>
                <li><a href="gallery.html">红色图库</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </nav>

    <main class="main-content">
        <section class="page-header">
            <div class="container">
                <h1>关于我们</h1>
                <p>了解我们的团队和项目背景</p>
            </div>
        </section>

        <section class="about-section">
            <div class="container">
                <div class="about-content">
                    <div class="about-intro">
                        <h2>项目背景</h2>
                        <p>本网站是甘肃农业大学"第四届红色网页设计大赛"的参赛作品，旨在通过现代网页技术传承和弘扬红色文化，让革命精神在数字时代焕发新的活力。</p>
                        
                        <h2>我们的使命</h2>
                        <p>通过数字化方式保存和传播红色文化，让更多年轻人了解革命历史，传承红色基因，担当时代使命。</p>
                    </div>
                    
                    <div class="team-section">
                        <h2>团队成员</h2>
                        <div class="team-grid">
                            <div class="team-member">
                                <div class="member-avatar">飒</div>
                                <h3>马飒飒</h3>
                                <p class="role">项目负责人 & 前端开发</p>
                                <p>负责项目整体规划、前端界面设计和用户体验优化，确保网站美观易用。</p>
                            </div>
                            <div class="team-member">
                                <div class="member-avatar">怡</div>
                                <h3>王馨怡</h3>
                                <p class="role">技术开发 & 架构设计</p>
                                <p>负责网站技术架构设计、功能开发和性能优化，确保网站稳定运行。</p>
                            </div>
                            <div class="team-member">
                                <div class="member-avatar">霞</div>
                                <h3>王宁霞</h3>
                                <p class="role">内容策划 & 资料整理</p>
                                <p>负责红色故事收集、内容策划和资料整理，确保内容准确生动。</p>
                            </div>
                            <div class="team-member">
                                <div class="member-avatar">美</div>
                                <h3>杨世美</h3>
                                <p class="role">视觉设计 & 用户体验</p>
                                <p>负责网站视觉设计、交互体验优化和图片素材处理。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tech-stack">
                        <h2>技术栈</h2>
                        <div class="tech-grid">
                            <div class="tech-item">
                                <h4>前端技术</h4>
                                <ul>
                                    <li>HTML5</li>
                                    <li>CSS3</li>
                                    <li>JavaScript</li>
                                    <li>响应式设计</li>
                                </ul>
                            </div>
                            <div class="tech-item">
                                <h4>开发工具</h4>
                                <ul>
                                    <li>Visual Studio Code</li>
                                    <li>Git</li>
                                    <li>Figma</li>
                                    <li>Photoshop</li>
                                </ul>
                            </div>
                            <div class="tech-item">
                                <h4>部署平台</h4>
                                <ul>
                                    <li>GitHub Pages</li>
                                    <li>Vercel</li>
                                    <li>000webhost</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>红色记忆·青春使命</h3>
                    <p>传承红色文化，担当时代使命</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="heroes.html">红色人物</a></li>
                        <li><a href="stories.html">红色故事</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱：2956276440@qq.com</p>
                    <p>甘肃农业大学信息科学技术学院</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 甘肃农业大学第四届红色网页设计大赛 - 红色传承团队 | 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>